<template>
  <div>
    <TopBar ref="topBar" :tabName="tabName" :backValue="backValue">
      <template v-if="!isView" #operate>
        <el-button :loading="loading" v-if="activeStep" type="primary" plain @click="stepChange(0)">上一步</el-button>
        <el-button :loading="loading" type="primary" @click="save">{{ activeStep === stepBarList.length - 1 ? '保存' : '下一步'
        }}</el-button>
      </template>
    </TopBar>
    <div class="page-main" v-loading="loading">
      <div v-if="!isView" class="stepBar-box">
        <div v-for="(item, index) in stepBarList" :key="item"
          :class="`stepBar-item ${activeStep === index ? 'stepBar-activeItem' : ''}`">{{ item }}</div>
      </div>
      <div v-else style="width:100%;padding-bottom:10px;">
        <el-radio-group v-model="activeStep">
          <el-radio-button :label="0" >
            基本信息
          </el-radio-button>
          <el-radio-button :label="1" >
            活动规则
          </el-radio-button>
        </el-radio-group>
      </div>
      <el-form class="myForm" :hide-required-asterisk="isView" :label-suffix="isView ? ':' : ''" v-show="activeStep === 0"
        ref="formRef" :model="form" label-width="auto">
        <el-form-item label="活动名称" prop="activeName" :rules="getRules('input', '活动名称')">
          <el-input v-if="!isView" style="width: 360px;" v-model="form.activeName" placeholder="请输入" show-word-limit
            :maxlength="20"></el-input>
          <span v-else>{{ form.activeName }}</span>
        </el-form-item>
        <el-form-item label="活动时间" prop="activeDate" :rules="activeDateRule">
          <div v-if="!isView">
            <el-radio-group v-model="form.activityTimeType" @change="activeDateTypeChange" :disabled="activityTimeTypeDisable">
              <el-radio :label="0">指定周期</el-radio>
              <el-radio :label="1">指定日期</el-radio>
            </el-radio-group>
            <div v-if="form.activityTimeType === 0" style="margin-top: 8px;" class="flex align-items-center">
              <span style="margin-right: 8px;">每周</span>
              <el-select v-model="form.activeDate" @change="activeDateChange" multiple collapse-tags clearable
                collapse-tags-tooltip placeholder="请选择" style="width: 260px">
                <el-option v-for="item in weekDateList" :key="item" :label="item" :value="item" />
              </el-select>
            </div>
            <div v-else style="margin-top: 8px;">
              <el-date-picker
                    v-model="form.activeDate[0]"
                    type="datetime"
                    :disabled-date="disabledDate"
                    value-format="YYYY-MM-DD HH:mm:ss"
                    placeholder="开始时间"
                    :disabled="disabledTimeFirst"
                  />&nbsp;- &nbsp;  
                  <el-date-picker
                    v-model="form.activeDate[1]"
                    type="datetime"
                    :disabled-date="disabledDate"
                    value-format="YYYY-MM-DD HH:mm:ss"
                    placeholder="结束时间"
                  />
              <!-- <el-date-picker v-model="form.activeDate" @change="activeDateChange" type="daterange" unlink-panels
                range-separator="~" start-placeholder="请选择开始时间" end-placeholder="请选择结束时间" value-format="YYYY-MM-DD" /> -->
            </div>
          </div>
          <span v-else>
            {{ formatActiveDate }}
          </span>
        </el-form-item>
        <el-form-item label="限购数量" prop="purchaseLimit" :rules="getRules('input', '限购数量')">
          <el-input v-if="!isView" style="width: 260px;" @input="purchaseLimitInput" clearable
            v-model="form.purchaseLimit" placeholder="请输入"></el-input>
          <span v-else>{{ form.purchaseLimit }}</span>
        </el-form-item>
        <el-form-item label="适用门店及业务" prop="applicableStoreAndBusiness" :rules="getRules('select', '适用门店及业务')">
          <div v-if="!isView">
            <el-radio-group :disabled="!form.activeDate || !form.activeDate.length"
              :model-value="form.applicableStoreAndBusiness" @change="applicableStoreAndBusinessChange">
              <el-radio :label="0">全部门店及业务</el-radio>
              <el-radio :label="1">指定门店及业务</el-radio>
            </el-radio-group>
          </div>
          <span v-else>{{ !form.applicableStoreAndBusiness ? '全部门店及业务' : '指定门店及业务' }}</span>
        </el-form-item>
        <el-form-item v-if="form.applicableStoreAndBusiness === 1" label="选择门店" prop="storeList" :rules="storeListRule">
          <div style="width: 500px;">
            <el-button v-if="!isView" style="margin-bottom: 8px;" type="primary" plain @click="handleOpenStoreDialog">
              <el-image :src="btnAddBlue" class="btnIcon" />
              选择门店
            </el-button>
            <el-table :header-cell-style="{ background: '#ddd' }" stripe :data="listData" max-height="300"
              style="width: 100%;">
              <el-table-column width="" show-overflow-tooltip prop="storeName" label="门店名称"></el-table-column>
              <!-- <el-table-column label="理疗馆">
                <template v-slot="{ row }">
                  {{ row.isHall ? '√' : '' }}
                </template>
              </el-table-column>
              <el-table-column label="商城">
                <template v-slot="{ row }">
                  {{ row.isShop ? '√' : '' }}
                </template>
              </el-table-column> -->
              <el-table-column v-if="!isView" label="操作">
                <template v-slot="{ row, $index }">
                  <el-button type="danger" plain @click="delStore(row)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
            <div class="myPagination">
              <el-pagination background v-model:current-page="pageConfig.page" v-model:page-size="pageConfig.pageSize"
                :page-sizes="pageConfig.pageSizes" :layout="pageConfig.layout" :total="total"
                @size-change="handleSizeChange" @current-change="handleCurrentChange" />
            </div>
          </div>
        </el-form-item>
      </el-form>
      <el-form class="myForm" :label-suffix="isView ? ':' : ''" :hide-required-asterisk="isView" v-show="activeStep === 1"
        ref="formRef1" :model="form" label-width="auto">
        <el-form-item label="活动商品" prop="activeGoods" :rules="activeGoodsRule">
          <div style="width: 100%;">
            <el-button v-if="!isView" style="margin-bottom: 8px;" type="primary" plain @click="handleOpenRangeDialog">
              <el-image :src="btnAddBlue" class="btnIcon" />
              选择商品
            </el-button>
            <template v-if="[...Object.values(activeGoods)].flat().length">
              <div style="margin-bottom: 8px;">
                <el-radio-group v-model="activeType">
                  <el-radio-button label="套餐" />
                  <el-radio-button label="项目" />
                  <el-radio-button label="产品" />
                </el-radio-group>
              </div>
              <el-table :header-cell-style="{ background: '#ddd' }" stripe height="500" :data="rangeListData">
                <el-table-column prop="productName" min-width="446" :label="activeType + '名称'">
                  <template v-slot="{ row }">
                    {{ row.comboName || row.projectName || row.productName }}
                  </template>
                </el-table-column>
                <el-table-column prop="retailPrice" label="零售价" min-width="200"></el-table-column>
                <el-table-column prop="newPrice" label="新人价格" min-width="260">
                  <template v-slot="{ row, $index }">
                    <el-form-item :inline-message="true">
                      <el-input v-if="!isView" style="width:128px" v-model="row.newPrice"
                        @input="() => { row.newPrice = giveFloatMin(limitFloat(row.newPrice)) }"
                        placeholder="请输入"></el-input>
                      <span v-else>{{ row.newPrice }}</span>
                    </el-form-item>
                  </template>
                </el-table-column>
                <el-table-column v-if="!isView" label="操作" min-width="136">
                  <template v-slot="{ row, $index }">
                    <el-button type="danger" plain @click="delActiveGoods(row)">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
              <div class="myPagination">
                <el-pagination background v-model:current-page="rangePageConfig.page"
                  v-model:page-size="rangePageConfig.pageSize" :page-sizes="rangePageConfig.pageSizes"
                  :layout="rangePageConfig.layout" :total="rangeTotal" @size-change="rangeHandleSizeChange"
                  @current-change="rangeHandleCurrentChange" />
              </div>
            </template>
          </div>
        </el-form-item>
      </el-form>
    </div>
    <SelectStote ref="selectStoteRef" @backStoreValue="backStoreValue"></SelectStote>
    <SelectRange ref="selectRangeRef" :groupTypeList="Object.keys(activeGoods)" @backRangeValue="backRangeValue">
    </SelectRange>
  </div>
</template>
<script>
export default {
  beforeRouteEnter(to, from, next) {
    next((e)=>{
      e.beforeRouteEnter(from.path)
    })
  },
}
</script>

<script setup>
import { newUserActivityOperate, getNewUserActivityShop, getNewUserActivityDetail } from '@/api/OperationManage/marketingManagements'
import { useDiffStoreValue,useDiffBrandId,compareTimestampsAndValidate} from './action.js'
import { limitFloat, limitInt, giveIntMin, giveFloatMin } from '@/utils/common.js'
import { useTableRefresh, useManualPaging, useImportImg } from '@/hooks/index'
import { useNewcomerDiscountData } from './index.js';
import { activityTypeEnum } from '@/views/OperateManagement/dict.js'
import useNowCloseTag from '@/hooks/useNowCloseTag'
import getRules from '@/validUtils';
import SelectStote from '@/views/OperateManagement/MarketingManagements/CouponOrganize/Components/SelectStote.vue'
import SelectRange from '@/views/OperateManagement/MarketingManagements/CouponOrganize/Components/SelectRange.vue'
import TopBar from '@/components/Topbar/index.vue';
const btnAddBlue = useImportImg('btn-add-blue')

const route = useRoute()
const topBar = ref(null)
const isView = computed(() => route.query.view ? true : false)
const isEdit = computed(() => route.query.id ? true : false)
const isCopy = computed(() => route.query.copy ? true : false)
const backValue = ref('/operateManagement/marketingManagements/shopActivityIndex')
const arr = ['/operateManagement/marketingManagements/myActivityIndex','/operateManagement/marketingManagements/shopActivityIndex']
const beforeRouteEnter = (path)=>{
  backValue.value = arr.includes(path) ? path :'/operateManagement/marketingManagements/shopActivityIndex'
}
defineExpose({
  beforeRouteEnter
})

const disabledDate = (time)=>{
    return new Date().getTime()-1*24*3600*1000 > time.getTime();
}

const tabName = computed(() => {
  return isView.value ? '查看新人优惠活动' : isCopy.value ? '复制活动' : isEdit.value ? '编辑活动' : '新建活动'
})
const loading = ref(false)
const pageId = ref(null)
const { searchTableRef, weekDateList, } = useNewcomerDiscountData()


const activeStep = ref(0)
const stepBarList = ['基本信息', '活动规则']
const stepChange = (index) => {
  activeStep.value = index
}
const formRef = ref(null)
const formRef1 = ref(null)
const form = ref({
  activeName: '',
  activityTimeType: 0,
  activeDate: [],
  purchaseLimit: null,
  applicableStoreAndBusiness: 0,
})

const activityTimeTypeDisable = ref(false)
const disabledTimeFirst = ref(false)
const formatActiveDate = computed(() => {
  if (!form.value.activeDate.length) return ''
  return !form.value.activityTimeType ? '每' + form.value?.activeDate?.join('、') : form.value?.activeDate[0] + ' - ' + form.value?.activeDate[1]
})
// ============ 处理编辑页面的逻辑 =============
onActivated(() => {
  // 处理编辑页面的逻辑
  if (route.query.id && route.query.id !== pageId.value) {
    reset()
    pageId.value = route.query.id
    getDetail()
  }
})
// 获取详情
const getDetail = async () => {
  try {
    loading.value = true
    let data = {
      activityId: pageId.value,
      activityType: '3'
    }
    const res = await getNewUserActivityDetail(data)
    form.value.activeName = res.activityName
    form.value.activityTimeType = res.activityTimeType
    if (res.activityTimeType) {
      form.value.activeDate = [res.activityStartTime, res.activityEndTime]
    } else {
      form.value.activeDate = res?.timeCycleTypeData?.map(item => weekDateList[item - 1]) ?? []
    }
    form.value.purchaseLimit = res.purchaseLimit
    form.value.applicableStoreAndBusiness = res.businessScope
    // 反显门店
    storeList.value = res.activityStoreData.map(item => {
      return {
        id: item.storeId,
        storeName: item.storeName,
        isHall: item?.businessType.includes(1) ?? false,
        isShop: item?.businessType.includes(2) ?? false,
        isStore: (item?.businessType.includes(1) || item?.businessType.includes(2)) ?? false,
        hallId: 'hall' + item.storeId,
        shopId: 'shop' + item.storeId,
        storeId: 'store' + item.storeId,
        brandId: item.brandId
      }
    })
    // 反显活动商品
    Object.keys(activeGoods.value).forEach(key => {
      activeGoods.value[key] = res.activityRuleData.find(item => item.activityType === activityTypeEnum[key]).ruleData.map(item => {
        return {
          id: item.productId,
          productName: item.productName,
          retailPrice: item.retailPrice,
          newPrice: item.discountedPrices,
        }
      })
    })
    activityTimeTypeDisable.value = true
    disabledTimeFirst.value = true
  } finally {
    loading.value = false
  }
}
// ============ 处理编辑页面的逻辑end =============


// ============= 适用门店及业务相关逻辑 =============
const storeList = ref([])
const {
  pageConfig,
  listData,
  total,
  handleSizeChange,
  handleCurrentChange } = useManualPaging(storeList, { layout: 'prev, pager, next' })
const selectStoteRef = ref(null)
const handleOpenStoreDialog = async () => {
  try {
    loading.value = true
    const params = {
      activityTimeType: form.value.activityTimeType,
      timeCycleType: form.value.activityTimeType,
      activityType:3
    }
    if (pageId.value) {
      params.activityId = pageId.value
    }
    if (params.activityTimeType) {
      params.activityStartTime = form.value.activeDate[0]
      params.activityEndTime = form.value.activeDate[1]
    } else {
      params.timeCycleList = form.value.activeDate.map(item => weekDateList.findIndex(i => i === item) + 1)
    }
    const res = await getNewUserActivityShop(params)
    const hallId = res.map(item => {
      if (item.businessScope.includes('1')) {
        return item.storeId
      }
      return null
    }).filter(Boolean)
    const shopId = res.map(item => {
      if (item.businessScope.includes('2')) {
        return item.storeId
      }
      return null
    }).filter(Boolean)

    const storeId = res.map(item=>{
      if (item.businessScope.indexOf('1') > -1 || item.businessScope.indexOf('2') > -1) {
        return item.storeId
      }
      return null
    }).filter(Boolean)
    selectStoteRef.value?.openModal(storeList.value, {
      hallId,
      shopId,
      storeId
    })
  } finally {
    loading.value = false
  }
}
const backStoreValue = (value) => {
  formRef.value.validate()
  // 如果没有选中的活动商品择不做处理
  const rangeLength = [...Object.values(activeGoods.value)].flat(Infinity).length
  if (!rangeLength) {
    storeList.value = value
    return
  }

  const oldBrands = storeList.value.map(item => item.brandId).filter(item => item)
  const newBrands = value.map(item => item.brandId).filter(item => item)
  // 如果没有变化则不做处理
  // const isChange = useDiffStoreValue(storeList.value, value)
  const idBrandChange = useDiffBrandId(oldBrands,newBrands)
  if (!idBrandChange) {
    storeList.value = value
    return
  }
  ElMessageBox.confirm('检测到门店业务变化，确认后将清空活动商品，是否继续？', '提示', {
    type: 'error'
  }).then(() => {
    storeList.value = value
    for (let key in activeGoods.value) {
      activeGoods.value[key] = []
    }
  })
}

const preJudge = (value) => {
    const rangeLength = [...Object.values(activeGoods.value)].flat(Infinity).length
      if(!rangeLength){
        return false
      }
      const oldBrands = storeList.value.map(item => item.brandId).filter(item => item)
      const newBrands = value.map(item => item.brandId).filter(item => item)
      
      const idBrandChange = useDiffBrandId(oldBrands,newBrands)
      if(!idBrandChange) {
        return false
      }else{
        return true
      }
  }


  const delStore = (row, index) => {
    const delstoreList = JSON.parse(JSON.stringify(storeList.value))
    delstoreList.splice(index,1)
    const resultJudge =  preJudge(delstoreList)
    console.log(resultJudge,'resultJudge');
    ElMessageBox(
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'error',
            title: '提示',
            showCancelButton: true,
            confirmButtonClass: 'delete',
            message: !resultJudge ? "确定要删除该门店吗?" : '检测到经营范围发生，提交后将清空活动商品，是否继续？',
            beforeClose: async (action, instance, done) => {
                if (action === 'confirm') {
                    instance.confirmButtonLoading = true
                    instance.confirmButtonText = 'Loading...'
                    try {

                        storeList.value.splice(index, 1)
                        if(resultJudge){
                          for(let key in activeGoods.value){
                            activeGoods.value[key] = []
                          }
                        }
                        ElMessage.success('删除成功');
                    } catch (error) {
                        // ElMessage.error('删除失败');
                    }finally{

                        instance.confirmButtonLoading = false
                        done()
                       
                    }
                    
                } else {
                    done()
                }
            },
        }
    )




  }



// const delStore = (row) => {
//   ElMessageBox.confirm('确定删除该门店吗？', '提示', {
//     type: 'error',
//     confirmButtonClass: 'el-button--danger',
//   }).then(() => {
//     const index = storeList.value.findIndex(item => item.id === row.id)
//     storeList.value.splice(index, 1)
//   })
// }
// ============= 适用门店及业务相关逻辑end =============


// ============= 活动商品选择相关逻辑 =============
// 活动商品
const activeItemGoods = computed(() => {
  return activeGoods.value[activeType.value]
})
const {
  pageConfig: rangePageConfig,
  listData: rangeListData,
  total: rangeTotal,
  handleSizeChange: rangeHandleSizeChange,
  handleCurrentChange: rangeHandleCurrentChange } = useManualPaging(activeItemGoods, { layout: 'prev, pager, next' })
const selectRangeRef = ref(null)
const activeGoods = ref({
  '套餐': [],
  '项目': [],
  '产品': []
})
const activeType = ref('套餐')
const handleOpenRangeDialog = () => {
  const storeIds = storeList.value.map(item => item.brandId).filter(item => item).join(',')
  selectRangeRef.value?.openRange(activeType.value, ...[[], ...Object.values(activeGoods.value), storeIds])
}
const backRangeValue = (type, ...args) => {
  activeGoods.value['套餐'] = args[1]
  activeGoods.value['项目'] = args[2]
  activeGoods.value['产品'] = args[3]
}
const delActiveGoods = (row) => {
  ElMessageBox.confirm('确定删除该商品吗？', '提示', {
    type: 'error',
    confirmButtonClass: 'el-button--danger',
  }).then(() => {
    const index = activeItemGoods.value.findIndex(item => item.id === row.id)
    activeGoods.value[activeType.value].splice(index, 1)
  })
}
// ============= 活动商品选择相关逻辑end =============


// ============= 校验规则相关处理 =============
const newPriceRule = (row, index) => {
  return [{
    required: true,
    validator: (rule, value, callback) => {
      if (!row.newPrice) {
        callback('请输入')
      }
      callback()
    },
    message: '请输入',
    trigger: 'blur'
  }]
}
const activeDateRule = [{
  required: true,
  validator: (rule, value, callback) => {
    if (!form.value.activeDate || !form.value.activeDate.length) {
      callback(new Error('请选择活动时间'))
    }
    if(form.value.activityTimeType == 1 && form.value.activeDate.length < 2){
        callback(new Error('活动开始时间和结束时间必填'))
      }
     else {
      callback()
    }
  }, trigger: ['blur','change']
}]
const storeListRule = [
  {
    required: true,
    validator: (rule, value, callback) => {
      if (!storeList.value.length) {
        callback(new Error('请选择门店'))
      } else {
        callback()
      }
    }, trigger: 'blur'
  }
]
const activeGoodsRule = [
  {
    required: true,
    validator: (rule, value, callback) => {
      if (![...Object.values(activeGoods.value)].flat().length) {
        callback(new Error('请选择活动商品'))
      } else {
        callback()
      }
    }, trigger: 'blur'
  }
]
// ============= 校验规则相关处理end =============


// ============= 事件相关处理start =============
const activeDateTypeChange = () => {
  form.value.activeDate = []
}
const activeDateChange = () => {
  formRef.value && formRef.value.validateField('activeDate')
}
const purchaseLimitInput = (val) => {
  form.value.purchaseLimit = giveIntMin(limitInt(val));
}
// 适用门店变化
const applicableStoreAndBusinessChange = (val) => {
  const rangeLength = [...Object.values(activeGoods.value)].flat(Infinity).length
  if (!rangeLength) {
    storeList.value = []
    form.value.applicableStoreAndBusiness = val
    return
  }
  ElMessageBox.confirm('检测到门店业务变化，确认后将清空活动商品，是否继续？', '提示', {
    type: 'error'
  }).then(() => {
    storeList.value = []
    form.value.applicableStoreAndBusiness = val
    for (let key in activeGoods.value) {
      activeGoods.value[key] = []
    }
  })

}
// ============= 事件相关处理end =============


// ============= 保存以及页面缓存处理start =============
const cancel = () => {
  reset()
  topBar.value.backHandle()
}
const reset = () => {
  activeStep.value = 0
  pageId.value = null
  form.value = {
    activeName: '',
    activityTimeType: 0,
    activeDate: [],
    purchaseLimit: null,
    applicableStoreAndBusiness: 0,
  }
  storeList.value = []
  activeGoods.value = {
    '套餐': [],
    '项目': [],
    '产品': []
  }
  formRef.value.resetFields()
}
useNowCloseTag(reset)
const save = () => {

  if(form.value.activityTimeType == 1){
          console.log(form.value.activeDate,'activeDate');
          if (!compareTimestampsAndValidate(form.value.activeDate[0], form.value.activeDate[1])) {
              ElMessage.error('结束时间不能小于开始时间且不能小于当前时间');
              return
          } 
      }
  formRef.value.validate(async (valid) => {
    if(form.value.applicableStoreAndBusiness == 1){
      if(storeList.value.length<=0){
        ElMessage.error('请选择门店！');
        return;
    }
    }
   
    if (!valid) return
    if (activeStep.value !== stepBarList.length - 1) {
      activeStep.value++
      return
    }
    for (let key in activeGoods.value) {
      const isNoInput = activeGoods.value[key].some(item => !item.newPrice)
      if (isNoInput) {
        ElMessage.error(`检测到${key}有新人价格未填写,请完善`)
        activeType.value = key
        return
      }
    }
    formRef1.value.validate(async (valid1) => {
      if (valid && valid1) {
        try {
          loading.value = true
          const params = {
            // 活动类型 2: 折扣限购;3: 新人特惠
            activityType: 3,
            activityName: form.value.activeName,
            activityTimeType: form.value.activityTimeType,
            timeCycleType: form.value.activityTimeType,
            isLimited: form.value.purchaseLimit > 0,
            limitedCount: form.value.purchaseLimit,
            activityMember: 0,
            activityMemberType: 1,
            businessScope: form.value.applicableStoreAndBusiness,
            businessScopeData: storeList.value.map(item => {
              return {
                storeId: item.id,
                storeFunctionType: [item.isShop ? 2 : 0, item.isHall ? 1 : 0].filter(Boolean),
              }
            }),
            activityRule: 1,
            activityRuleList: Object.keys(activeGoods.value).map(item => {
              return {
                activityType: activityTypeEnum[item],
                discountsType: 0,
                ruleData: activeGoods.value[item].map(goods => {
                  return {
                    productId: goods.id,
                    discountedPrices: goods.newPrice,
                  }
                })
              }
            }).filter(item => item.ruleData.length),
          }
          // 根据活动时间类型来传不同的值  0: 指定周期；1: 指定日期
          if (form.value.activityTimeType) {
            params.activityStartTime = form.value.activeDate[0]
            params.activityEndTime = form.value.activeDate[1]
          } else {
            params.timeCycleList = form.value.activeDate.map(item => weekDateList.findIndex(i => i === item) + 1)
          }
          if (!isCopy.value && isEdit.value) {
            params.activityId = pageId.value
          }
          await newUserActivityOperate(params)
          ElMessage.success(`${isCopy.value ? '复制' : isEdit.value ? '修改' : '新增'}成功`)
          useTableRefresh(searchTableRef, isEdit.value)
          cancel()
        } finally {
          loading.value = false
        }
      }
    })
  })
}
// ============= 保存以及页面缓存处理end =============


</script>

<style lang="less" scoped>
div {
  box-sizing: border-box;
}

.page-main {
  padding: 16px 24px;
}

.stepBar-box {
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  border-radius: 4px;
  overflow: hidden;

  .stepBar-item {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: -16px;
    width: 306px;
    height: 40px;
    color: #000;
    font-size: 16px;
    -webkit-clip-path: polygon(100% 0, 100% 50%, 100% 100%, 0% 100%, 5% 50%, 0% 0%);
    clip-path: polygon(100% 0, 100% 50%, 100% 100%, 0% 100%, 5% 50%, 0% 0%);
    background: #EBF2FF;
    cursor: pointer;
  }

  .stepBar-activeItem {
    color: #fff;
    background: #3480FF;
  }

  .stepBar-item:first-of-type {
    margin-left: 0;
    -webkit-clip-path: polygon(0% 0%, 95% 0, 100% 50%, 95% 100%, 0% 100%);
    clip-path: polygon(0% 0%, 95% 0, 100% 50%, 95% 100%, 0% 100%);
  }
}

:deep(.el-form) {
  .el-form-item__label {
    color: #222;
  }

  .el-radio {
    color: #000;
  }
}

.myPagination {
  display: flex;
  justify-content: flex-end;
  margin-top: 16px;
}

:deep(.el-radio-button:first-child .el-radio-button__inner) {
  border-left: 1px solid #3480FF;
}</style>